<template>
  <div :class="{'practice-warp': isPractie}" class="">
    <div class=" section-wapper " :data-id="id" style="height: calc(100vh - 100px)">
      <dl class="lxibtn pos-fixed font-20px pointer">
        <dt class="wh-36px is-circle"><i class="el-icon-setting"></i></dt>
        <dd >
          <ul class="" >
            <li class="wh-36px is-circle" @click="editSection(section)">
              <i class="el-icon-edit"></i>
            </li>
            <li  class="wh-36px is-circle" @click="toPractices()">
              <i class="el-icon-tickets"></i>
            </li>
          </ul>
        </dd>
      </dl>
      <mavon-editor
          v-if="section.strength"
          class="bg-f "
          v-model="section.strength "
          :subfield="false"
          :boxShadow="false"
          defaultOpen="preview"
          :toolbarsFlag="false"
      />
      <el-empty v-else description="内容为空">
        <el-button type="primary" @click="editSection" size="small">编写内容</el-button>
      </el-empty>
    </div>
    <div v-show="isPractie">
      <div class="text-right pd-10px">
        <i class="el-icon-close" @click="isPractie = false"></i>
      </div>
      <el-input type="textarea" class="practice-code" v-model="code" ></el-input>
    </div>
  </div>
</template>

<script>
import contentex from "api/learn/contentex";
import ApiResponse from "utils/ApiResponse";

export default {
  name: 'sections',
  data(){
    return{
      isPractie: false ,
      section:{} ,
      code:'',
    }
  },
  created(){
    this.getSection()

  },
  mounted(){
  },
  methods:{
    editSection(){
        this.$router.push({
          path: '/updateSection',
          query:{
            id: this.id
          }
        })
    },
    toPractices(){
      this.isPractie = !this.isPractie
    },
    getSection(id){
      contentex.detail(id).then(res=>{
        new ApiResponse(res).ok((data)=>{
          this.section = data
        })
      })
    }
  },
  computed:{
      id(val){
        let id = this.$route.params.id ;
        this.getSection(id)
        return id
      }
  }

}
</script>

<style lang="css">
.v-show-content{
  background-color: #fff  !important;

}
.markdown-body{
  border: none  !important;
  height: 100% !important;
}
.markdown-body table{
  display: table  !important;
}
.section-wapper{
  height: calc(100% - 60px);
  overflow-y: auto;
  position: relative;
}
.lxibtn{
  right: 10px;
  top:40%;
  z-index: 9999;

}
.practice-warp{
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px );
  box-sizing: border-box;
}
.practice-warp .section-wapper{
  overflow-y: auto;
  flex: 1;
  box-sizing: border-box;
}
.practice-code textarea{
  height: 200px;
  background-color: #2d2d2d;
  color: #fff;
  box-sizing: border-box;
  outline: none;
  border: none;
  border-radius: 0;
  reset: none;
}

dl{
  background-color: #67C23A;
  color:#fff;
}
dl>dd{
  display:none ;
}
dl:hover dd{
  display: block ;
}
.wh-36px{
  width:36px ;height: 36px ;
  text-align: center ;
  line-height: 36px ;
}
.is-circle{
  border-radius: 50%;
}
.pd-10px{padding:10px;}
pre,code{
  font-family: Consolas !important;
}
</style>
